<style scoped>
.layout{
  /* min-width: 1000px; */
  overflow: hidden;
}
.layout-logo {
	width: 400px;
	height: 58px;
	background: #5b6270;
	border-radius: 3px;
	float: left;
	position: relative;
}
.layout-content {
	overflow: hidden;
}
</style>
<template>
	<div class="layout">
		<Menu mode="horizontal" active-name="1" ref="layoutMenu" theme="light" style="height: 64px;line-height: 64px;background-color:#3A64FF">
			<div class="layout-logo" style="background-color: transparent;">
				<img style="width:153px;height: 41px;margin:3% 0 3.5% 20%" src="../../assets/logo.png" />
			</div>
			<user style="float: right;padding-right: 102px;" :user-name="userName" />
		</Menu>
		<div class="layout-content" ref="layoutContent">
				<keep-alive>
					<router-view v-if="!$route.meta.notCache"></router-view>
				</keep-alive>
				<router-view v-if="$route.meta.notCache"></router-view>
		</div>
	</div>
</template>
<script>
import User from './components/user';
import { mapMutations, mapActions, mapGetters } from 'vuex';
export default {
	components: {
		User
	},
	mounted() {
		// window.onresize = () => {
		// 	return (() => {
		// 		var w = document.documentElement.clientWidth || document.body.clientWidth;
		// 		var h = document.documentElement.clientHeight || document.body.clientHeight;
		// 		var offsetHeight = h - this.$refs.layoutMenu.$el.clientHeight - 120;
		// 		this.$refs.layoutContent.style.height = offsetHeight + 'px';
		// 	})();
		// };
	},
	data() {
		return {};
	},
	computed: {
		userName() {
			return this.$store.state.user.userName;
		}
	},
	methods: {
		getHome() {
			this.$router.push({ name: 'home' });
		}
	}
};
</script>
